<template>
    <section class="UserList">
        <Table ref="Tabular" :search-options="searchOptions" :tableDatas="list" :conf="tabConf" :loading="loading"
            :pages="pages" :total="total" :columns="columns" @search="handleSearch" @delete="handleDel"
            @editor="handleEditor">
            <template #searchOptLeft>
                <a-button v-permission="['createFlag']" type="primary" @click="handleAdd"><i class="fa fa-plus"
                        style="margin-right: 8px;" />{{
                            $t("New") }}</a-button>
            </template>
            <template #index="{ row, index }">
                {{ index + 1 }}
            </template>
            <template #roleList="{ row }">
                <a-tooltip placement="bottom">
                    <span>{{ showRoles(row.roleList) }}</span>
                    <template v-if="row.roleList && row.roleList.length" #title>
                        <div slot="content">
                            <div v-for="(role, index) in row.roleList" :key="index">
                                {{ showCurrentLang(role, isCn, isEn, isArabic) }}
                            </div>
                        </div>
                    </template>
                </a-tooltip>
            </template>
            <template #departmentList="{ row }">
                <a-tooltip placement="bottom">
                    <span>{{ showRoles(row.departmentList) }}</span>
                    <template v-if="row.departmentList && row.departmentList.length" #title>
                        <div slot="content">
                            <div v-for="(department, index) in row.departmentList" :key="index">
                                {{ showCurrentLang(department, isCn, isEn, isArabic) }}
                            </div>
                        </div>
                    </template>
                </a-tooltip>
            </template>
            <template #lockStatus="{ row }">
                <a-button type="link" block v-if="row.lockStatus === 1" @click="unLocked(row)">{{ $t("解锁")
                    }}</a-button>
                <span v-else>--</span>
            </template>
            <template #status="{ row }">
                <span v-if="row.status === 1">{{ $t("活动") }}</span>
                <span v-else-if="row.status === 0">{{ $t("不活动") }}</span>
                <span v-else>-</span>
            </template>
            <template #opts="{ row }">
                <span v-permission="['reset']" class="reset" @click="resetPassword(row)">
                    {{ $t('重置密码') }}
                </span>
            </template>
        </Table>
        <a-modal v-model:open="unLockOpen" :ok-text="$t('保存')" :cancel-text="$t('关闭')" @ok="unLockHideModal">
            {{ $t("解锁提示") }}
        </a-modal>
        <!-- <AddDialog v-if="visible" v-model:visible="visible" :target="target" @ok="handleFlush" /> -->
        <AddDialog v-if="addVisible" v-model:visible="addVisible" :uid="uid" :userId="userId" @ok="handleFlush" />
        <ResetDialog v-if="visible" v-model:visible="visible" :target="itemInfo" @ok="handleFlush" />
    </section>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Table from "@/components/Table/index.vue";
import { queryMenus, DeleteMenu, queryPageMenus } from "@/api/setting";
import { GetSysUserPage } from "@/api/user/index";
import AddDialog from "./components/add-dialog.vue";
import ResetDialog from './components/reset-dialog.vue'
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { GetSysUserAdd, PutSysUserUpdate, userUnlock, userLock } from "@/api/user/index";
import { splitStr, showCurrentLang } from '@/utils/common/common'
import { getRouter } from '@/utils/common/btn'
import { useLanguage } from "@/hooks/index";
const { isEn, isCn, isArabic } = useLanguage();
const { t: $t } = useI18n();
let pages = ref<object>({ pageSize: 30, pageNo: 1 });
let total = ref(20);
let list = ref<object>([]);
let loading = ref<boolean>(false);
let visible = ref(false);
let addVisible = ref(false)
let target = ref({});
let Tabular = ref(null);
let unLockOpen = ref(false)
let uid = ref('')
let userId = ref('')
let itemUuid = ref('')
let itemInfo = ref({})
const tabConf = {
    customRow: rowClick
}
const columns = ref<object>([
    // {
    //     title: () => $t("ID"),
    //     dataIndex: "index",
    //     slot: "index",
    //     align: "left",
    // },
    {
        title: () => $t('全名'),
        dataIndex: "username",
        align: "left",
    },
    {
        title: () => $t('邮箱用户名'),
        dataIndex: "email",
        align: "left",
    },
    {
        title: () => $t('系统角色'),
        dataIndex: "roleList",
        align: "left",
        slot: "roleList",
        ellipsis: true,
    },
    {
        title: () => $t('部门'),
        dataIndex: "departmentList",
        align: "left",
        slot: "departmentList",
        ellipsis: true,
    },
    {
        title: () => {
            return (
                $t('锁定')
            )
        },
        dataIndex: 'lockStatus',
        slot: "lockStatus",
        sorter: true,
        align: 'center',
        width: 100
    },
    {
        title: () => {
            return (
                $t('状态')
            )
        },
        dataIndex: 'status',
        slot: "status",
        align: 'center',
        width: 100
    },
    {
        title: () => $t("操作"),
        dataIndex: "opts",
        align: "center",
        slot: "opts",
        // edit: true,
        // delete: true,
        width: 160,
    },
]);
let searchOptions = ref([
    {
        prop: "keyword",
        label: "",
        type: "inputSearch",
        default: "",
        attrs: {
            clearable: true,
        },
    },
]);
const handleSearch = async ({ searchForm, pager }: any) => {
    let requestData = {
        ...searchForm,
        ...pager,
    };
    loading.value = true;
    const { data, totalCount, pageSize, pageNo } = await GetSysUserPage(
        requestData
    ).finally(() => {
        loading.value = false;
    });
    total.value = totalCount;
    list.value = data;
    pages.value.pageSize = pageSize;
    pages.value.pageNo = pageNo;
};
const handleFlush = () => {
    Tabular.value.flush();
};
const unLocked = (record: object) => {
    unLockOpen.value = true
    itemUuid.value = record.uuid
}
const handleAdd = () => {
    uid.value = ''
    addVisible.value = true
}
const handleEdit = (item: object) => {
    uid.value = item.uuid
    userId.value = item.id
    addVisible.value = true
}
function rowClick(record: any, index: any) {
    return {
        onclick: (event) => {
            if (getRouter('userList:modifyFlag') && event.target.cellIndex <= 5) {
                handleEdit(record)
            }
        }
    }
}
const resetPassword = (record: object) => {
    itemInfo.value = record
    visible.value = true
}
const showRoles = (list) => {
    if (!list || !list.length) return "--"
    let strs = []
    list.forEach(i => {
        if (i.id) {
            strs.push(showCurrentLang(i, isCn.value, isEn.value, isArabic.value))
        }
    });
    return strs.join('、')
}
const unLockHideModal = debounce(async () => {
    await userUnlock(itemUuid.value)
    unLockOpen.value = false
    message.success($t('操作成功'))
    handleFlush()
}, 1000)
const handleEditor = (record) => {
    target.value = cloneDeep(record);
    visible.value = true;
};
const handleDel = async (record) => {
    const id = record.id;
    if (!id) return;
    await DeleteMenu(id);
    message.success($t("操作成功"));
    handleFlush();
};
onMounted(() => {
    handleSearch({ searchForm: { keyword: "" }, pager: { pageSize: 30, pageNo: 1 } });

});
</script>

<style lang="scss" scoped>
.UserList {
    padding: 24px 24px 0 16px;

    .reset {
        cursor: pointer;
        color: var(--btn-font-link);
    }
}
</style>
